All Countries Drop Down List | HTML Select Country Name
Make money for being or staying online/internet.
You will get a $50 starting gift when you join using this code: Exode4LKrbujm1z and link:: GET THE OFFER NOW!!
This simple country dropdown list is freely available for you to copy and use in your project forms.
Tutorial
Html Markup
<div class="container"> <h1>All countries Dropdown List </h1> <select id="countries" name="countries"> </select> </div>
For the value attribute, you can decide to either store or pass in the full country name, alpha2code, alpha3code, or callingCodes. etc
Example
- Full country name: Uganda
- Alpha2code: UG
- Alpha3code: UGA
- callingCodes: 256
Javascript Code
//Listening/waitig for the document to be ready document.addEventListener('DOMContentLoaded', () => { const selectDrop = document.querySelector('#countries'); // const selectDrop = document.getElementById('countries'); fetch('http://restcountries.eu/rest/v2/all').then(res => { return res.json(); }).then(data => { let output = ""; data.forEach(country => { output += ` <option value="${country.name}">${country.name} </option>`; }) selectDrop.innerHTML = output; }).catch(err => { console.log(err); }) });
You can also clone the project via my Github repo: https://github.com/KasiitaTimothy/All-countries-dropdown-list
If this article was useful to you, please consider subscribing to my channel: Oston Code Cypher
Save up to 80% with this Domain & Shared Hosting package deal! 80% OFF - GET OFFER NOW
Related Post(s)
» Display Random Advice On Your Website or Web App Using Advice Slip JSON API
» How to display News with out searching - NEWS API(Source Code)
collections_bookmark Category :: APIdate_range Published :: 2 years ago At: 06:55 PM
event_note Detailed Date :: Jun 18th, 2021
person Writer :: Code